// 我的 =》 个人档案
<template>
  <view class="personal-info-main">
    <nav-bar class="header" back title="个人档案" @goBack="goBack"/>
    <view class="main-container">
      <view class="personal-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in personalInfoData" :key="index" :title="item.title" :value="item.value">
            <template #right-icon v-if="item.title === '头像'">
              <span class="operation"><img src="../../../static/img/autaor.png" alt=""></span>
            </template>
          </van-cell>
        </van-cell-group>
      </view>
      <view class="dept-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in deptInfoData" :key="index" :title="item.title" :value="item.value"/>
        </van-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import {mapGetters} from "vuex";

export default {
  components: {navBar},
  data() {
    return {
      personalInfoData: [

      ],
      deptInfoData: [

      ],
    };
  },
  computed:{
    ...mapGetters(['account']),
  },
  onLoad() {
    this.getLoinUser()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/acceptanceVersion/mine/mine'
      })
    },
    getLoinUser() {
      const params = {
        account: this.account
        // account: 'sx_jiwei'
      }
      this.$api.geteaLoginUserInfo(params).then(res => {
        this.personalInfoData = [
          {
            title: "头像",
          },
          {
            title: "姓名",
            value: res.data.userName
          },
          {
            title: "手机号",
            value: res.data.phone
          },
          // {
          //   title: "性别",
          //   value: res.data.phone
          // },
          // {
          //   title: "年龄",
          //   value: res.data.phone
          // }
        ]
        this.deptInfoData = [
          {
            title: "所属组织",
            value: res.data.org
          },
          {
            title: "角色",
            value: res.data.role
          },
        ]
      })
    }
  }

};
</script>

<style scoped lang="scss">
.personal-info-main {
  min-height: 100vh;
  background-color: #F2F6FA;

  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }

  .main-container {
    padding: px2vh(30) px2vw(30);

    .personal-info-container, .dept-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
    }

    .personal-info-container {
      margin-bottom: px2vh(30);

      .operation {
        display: flex;
        align-items: center;
        margin-left: px2vw(30);

        img {
          width: px2vw(72);
        }
      }
    }
  }
}
</style>
